<template>
    <div>
        <!--筛选搜索  -->
        <el-card class="box-card">
            <div class="screening-top">
                <div class="icon">
                    <el-icon size="18px">
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </div>
                <div>
                    <el-button @click="reset">重置</el-button>
                    <el-button type="primary" @click="queryUser(val)">查询搜索</el-button>
                </div>
            </div>
            <div class="screening-bottom">
                <div>账号/姓名:</div>
                <el-input placeholder="请输入账号/姓名" v-model="val" />
            </div>
        </el-card>
        <!--添加  -->
        <el-card class="adduser">
            <div>
                <el-icon>
                    <DocumentCopy />
                </el-icon>
                <div>添加</div>
            </div>
            <el-button type="primary">查询搜索</el-button>
        </el-card>
        <!-- 用户列表 -->
        <el-table :data="dataList" border style="width: 100%" align="center">
            <el-table-column prop="id" label="编号" width="60" align="center" />
            <el-table-column prop="username" label="账号" align="center" />
            <el-table-column prop="nickName" label="姓名" align="center" />
            <el-table-column prop="email" label="邮箱" align="center" />
            <el-table-column label="添加时时间" align="center">
                <template #default="{ row }">
                    {{ fromtime(row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column label="最后登录" align="center">
                <template #default="{ row }">
                    {{ fromtime(row.loginTime) }}
                </template>
            </el-table-column>
            <el-table-column type="index" label="是否启用" min-width="100" width="100" align="center">
                <!-- <el-switch v-model="scope.row.status" /> -->
                <template #default="scope">
                    <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                        @click="updateStatus(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="140">
                <template #default="{ row }">
                    <div class="operation">
                        <el-button type="primary" link>分配角色
                        </el-button>
                        <el-button type="primary" link @click="editAdminInfo(row)">编辑
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <!-- <el-config-provider :locale="zhCn"> -->
            <el-pagination v-model:currentPage="data.pageNum" v-model:page-size="data.pageSize"
                :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="data.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        <!-- </el-config-provider> -->

        <!-- 编辑对话框 -->
        <EditAdmin :adminDate="adminDate" :visible="editAdminVisible" @hide="hideEditAdmin" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getAdminListAPI, getAdminUpdateStatusAPI } from '../../request/api'
// import { ElConfigProvider } from 'element-plus'
// import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import useTable from '../../components/useTable'
import EditAdmin from './components/Editadmin.vue'
import { IfromDate } from './type'
let val = ref('')
const {
    data,
    dataList,
    queryUser,
    handleSizeChange,
    handleCurrentChange,
} = useTable({ api: getAdminListAPI, paramsval: { keyword: val.value } })



//  修改帐号状态
const updateStatus = (key: { id: number, status: number }) => {
    getAdminUpdateStatusAPI(key.id, key.status)
}
// 消除查询用户
function reset (){
    val.value=''
    queryUser('')
} 

// 与子组件相关的数据
let editAdminVisible = ref(false)
let adminDate = ref({} as IfromDate)

// 编辑用户
function editAdminInfo(row: IfromDate) {
    editAdminVisible.value = true
    adminDate.value = row
}
function hideEditAdmin() {
    editAdminVisible.value = false
}




// 解析时间
function fromtime(date: string) {
    if (date !== null) {
        let d = new Date(date);
        let month =
            d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times =
            d.getFullYear() +
            "-" +
            month +
            "-" +
            day +
            " " +
            hours +
            ":" +
            min +
            ":" +
            sec;
        return times;
    }
}
</script>
<style lang = "less" scoped>
:deep(.el-card) {
    // padding: 0;
    margin-bottom: 30px;

    .screening-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .icon {
            display: flex;

            span {
                padding-left: 16px;
            }
        }
    }

    .screening-bottom {
        display: flex;
        align-items: center;
        margin: 30px 0 30px 30px;
    }

    .el-input {
        width: 200px;
        height: 32px;
        line-height: 32px;

        .el-input__inner {
            text-indent: 1em;
        }
    }
}

:deep(.adduser) {
    .el-card__body {
        display: flex;
        align-items: center;
        justify-content: space-between;

        div {
            display: flex;

            .el-icon {
                padding-right: 20px;
            }
        }
    }
}

:deep(.el-pagination) {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
}

.operation {
    display: flex;
    justify-content: space-evenly;
}

:deep(.el-dialog__body) {
    .el-input__inner {
        text-indent: 1em;
    }

    .el-textarea__inner {
        height: 70px;
    }
}
</style>